<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>简单的计算公式</title>
  <style>
    *{margin: 0;padding: 0}
    #div1{
      width:500px;
      height:50px;
      border:1px solid blue;
      line-height: 40px;
      text-align: center;
    }
    #table{
      width:500px;
      height:200px;
      border:1px solid blue;
    }
    #tdx,#tdy,#tdz{
      width:400px;
      text-align: left;
      font-size: 25px;
      font-family: 华文楷体;
    }
    #tuige,#jieguo,#guiling{
      width:80px;
      height:40px;
      font-family: 华文楷体;
      font-size: 25px;
    }
    .inp{
      width:50px;
      height:30px;
    }
    .tdinp{
      width:200px;
      height:30px;
    }
  </style>
  <script>
    function funcx(x){
      if(isNaN(x)==true){
        alert("请您输入纯数字以便计算")
      }
      document.getElementById("inp1").value=x;
    }
    function funcy(y){
      if(isNaN(y)==true){
        alert("请您输入纯数字以便计算")
      }
      document.getElementById("inp2").value=y;
    }
    function funcz(z){
      if(isNaN(z)==true){
        alert("请您输入纯数字以便计算")
      }
      document.getElementById("inp3").value=z;
    }
    function jieguo(){
      var x=Number(document.getElementById("inp1").value);
      var y=Number(document.getElementById("inp2").value);
      var z=Number(document.getElementById("inp3").value);
      rst=Math.pow((x+y),2)+z;
      document.getElementById("inp4").value=rst;
    }
    function tuige(){
      var txt = document.getElementById("inp1");
      txt.value = txt.value.substring(0,txt.value.length - 1);
      var txt = document.getElementById("inp2");
      txt.value = txt.value.substring(0,txt.value.length - 1);
      var txt = document.getElementById("inp3");
      txt.value = txt.value.substring(0,txt.value.length - 1);
      var txt = document.getElementById("inpx");
      txt.value = txt.value.substring(0,txt.value.length - 1);
      var txt = document.getElementById("inpy");
      txt.value = txt.value.substring(0,txt.value.length - 1);
      var txt = document.getElementById("inpz");
      txt.value = txt.value.substring(0,txt.value.length - 1);
    }
  function guiling(){
      var txt="";
      document.getElementById("inp1").value=txt;
      document.getElementById("inp2").value=txt;
      document.getElementById("inp3").value=txt;
      document.getElementById("inp4").value=txt;
      document.getElementById("inpx").value=txt;
      document.getElementById("inpy").value=txt;
      document.getElementById("inpz").value=txt;
  }
  </script>
</head>
<body>
<div id="div1">
  <span>(</span>
  <input id="inp1" class="inp">
  <span>+</span>
  <input id="inp2" class="inp">
  <span>)</span>
  <sup>2</sup><span>+</span>
  <input id="inp3" class="inp">
  <span>=</span>
  <input id="inp4" style="height:30px">
</div>
<table id="table">
  <tr>
    <td id="tdx">请输入x值:  <input id="inpx" class="tdinp" oninput="funcx(this.value)"></td>
    <td><input id="tuige" type="button" value="退格" onclick="tuige()"></td>
  </tr>
  <tr>
    <td id="tdy">请输入y值:  <input id="inpy" class="tdinp" oninput="funcy(this.value)"></td>
    <td><input id="jieguo" type="button" value="结果" onclick="jieguo()"></td>
  </tr>
  <tr>
    <td id="tdz">请输入z值:  <input id="inpz" class="tdinp" oninput="funcz(this.value)"></td>
    <td><input id="guiling" type="button" value="归零" onclick="guiling()"></td>
  </tr>
</table>
</div>
</body>
</html>
